<template>
  <div>
    <div v-if="count == 0">此版块下无帖子</div>
    <div v-for="item in ajaxResult" :key="item.postingId" class="posting-row">
      <Card
        style="width: 90%; height: 90%; margin: 0 auto"
        :to="'/Posting/' + item.postingId"
      >
        <div>
          <div class="posting-name">[ {{ item.postingName }}]</div>
          <Divider />
          <div class="firstContent">
            {{ item.firstContent }}
          </div>
          <div class="author-box">
            <div style="height: 40px">
              <span style="line-height: 60px">{{ item.nickName }}</span>
              <Avatar :src="item.headImage" size="large" style="float: right" />
            </div>
            <div>创建日期:{{ item.createDate }}</div>
          </div>
          <!-- <div></div> -->
          <!-- <img src="../../images/logo.png"> -->
          <!-- <h3>{{ item }}</h3> -->
        </div>
      </Card>
    </div>

    <div style="position: fixed; bottom: 3em; width: 20%; margin-left: 40%">
      <Button type="info" to="/PostingEdit" style="float: left"
        >发表帖子</Button
      >
      <Page :total="count" @on-change="change_page" :page-size="5" show-total />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Board',
  data () {
    return {
      count: 100,
      ajaxResult: ''
      // msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    change_page (page) {
      // console.log(page)
      var _this = this // 临时变量
      this.$axios({
        method: 'get',
        url: '/selectPosting',
        params: {
          boardId: this.$route.params.boardId,
          page: page
        }
      }).then(function (response) {
        console.log(response.data)
        _this.ajaxResult = response.data.result
        _this.count = response.data.count
      })
    }
  },
  mounted () {
    // console.log(this.$route.params)
    var _this = this // 临时变量
    this.$axios({
      method: 'get',
      url: '/selectPosting',
      params: {
        boardId: this.$route.params.boardId,
        page: 1
      }
    }).then(function (response) {
      console.log(response.data)
      _this.ajaxResult = response.data.result
      _this.count = response.data.count
    })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.posting-row {
  margin: 0 auto;
  margin-top: 1%;
  width: 50%;
  height: 10em;
  /* border: 0.1em solid red; */
}
.posting-name {
  float: left;
}
.firstContent {
  float: left;
}
.author-box {
  float: right;
}
</style>
